<template>
    <div class="search-index">
        <header>
            <Header></Header>
        </header>
        <section>
            <div class="search-history" v-if="searchArr.length">
                <h2>
                    <i class="iconfont icon-shijian"></i>
                    <span>历史搜索</span>
                    <span @click="deleteStorage">清空历史记录</span>
                </h2>
                <ul>
                    <li 
                    v-for='(item,index) in searchArr'
                    :key="index"
                    @click="goSearchList(item)"
                     >{{item}}</li>
                    
                </ul>
            </div>
            <div v-else>暂无搜索记录...</div>       
        </section>
         <Tabbar></Tabbar>
    </div>
</template>
<script>
import  Tabbar from '@/components/common/Tabbar.vue';
import  Header from '@/components/search/Header.vue';

import { MessageBox } from 'mint-ui';


export default ({
    data() {
        return{
            searchArr:[],
        }
    },
    methods:{
        deleteStorage(){
            MessageBox({
            title: '提示',
            message: '确定执行此操作?',
            showCancelButton: true
            }).then(res=>{
                // console.log(res);
                if(res == 'confirm'){
                    //删除本地存储
                    localStorage.removeItem('searchList');
                    //清空数组数据，页面上显示是由数组里的内容进行渲染的
                    this.searchArr = [];
                }
            })
        },
        //点击历史搜索进入搜索结果页面
        goSearchList( item ){
            console.log(item);
            this.$router.push({
                name:'list',
                query:{
                    key:item
                }
            });
        }
    },
    components:{
        Tabbar,
        Header,
      
    },
    created(){
        this.searchArr = JSON.parse(localStorage.getItem('searchList')) || [];
    }
})
</script>
<style scoped>
.search-index{
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
section{
	flex: 1;
	overflow: hidden;
    background-color: #f5f5f5;
}

.search-history h2{
    position: relative;
    padding: 1.25rem;
    font-weight: 500;
    font-size: 1.25rem;
}
.search-history h2 i{
    margin-right: 0.3125rem;
    color: red;
    font-size: 1.25rem;
    font-weight: 500;
}
.search-history h2 span:last-child{
    position: absolute;
    right: 1.25rem;

}
.search-history ul{
    display: flex;
    flex-wrap: wrap;
    padding: 0.3125rem 0.625rem;
}
.search-history ul li{
    border: 0.0625rem solid #ccc9c9;
    font-size: 1rem;
    padding: 0.1875rem 0.375rem;
    margin: 0.625rem;
}
</style>